import { RbacRoleType } from '@/data/auth/role';
import { useMenus } from '@/hooks/auth/useMenus';
import { list } from '@/services/data';
import { ProCard } from '@ant-design/pro-components';
import { Form, Modal, Transfer } from 'antd';
import React, { useEffect, useState } from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<RbacRoleType> & {
    targetKeys?: React.Key[];
  };

export type UpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  updateModalVisible: boolean;
  values: Partial<RbacRoleType>;
};

const AddMenuModal: React.FC<UpdateFormProps> = (props) => {
  const { allMenu } = useMenus();
  const transformedData =
    allMenu?.map(({ id, cnName }: any) => ({
      name: `${cnName}`,
      key: id,
    })) || [];

  const initialTargetKeys: React.Key[] | (() => React.Key[]) = [];
  const [form] = Form.useForm<FormValueType>();
  const [targetKeys, setTargetKeys] = useState<React.Key[]>(initialTargetKeys);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const roleId = props.values.id;
      const hasMenuList = await list('/system/rbacRoleMenuBtn', { roleId, correlationType: 1 });
      const hasMenuIdList = hasMenuList?.list?.map((btn: any) => btn.menuOrBtnId) || [];

      setTargetKeys(hasMenuIdList);
    };
    if (props.updateModalVisible && props.values.id) fetchData();
  }, [props.values, props.updateModalVisible]);

  const handleOk = async () => {
    await props.onSubmit({ targetKeys });
  };

  const handleChange = (targetKeys: React.Key[]) => {
    setTargetKeys(targetKeys);
  };

  const handleSelectChange = (sourceSelectedKeys: React.Key[], targetSelectedKeys: React.Key[]) => {
    setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
  };

  return (
    <Modal
      width={1200}
      style={{
        padding: '32px 40px 48px',
      }}
      title="授权"
      open={props.updateModalVisible}
      onCancel={() => {
        props.onCancel();
      }}
      onOk={handleOk}
    >
      <ProCard split="vertical">
        <ProCard colSpan="50%">
          <Form form={form} initialValues={props.values}>
            <Transfer
              listStyle={{
                width: 500,
                height: 600,
              }}
              dataSource={transformedData}
              titles={['未得到菜单', '已拥有菜单']}
              targetKeys={targetKeys}
              selectedKeys={selectedKeys}
              onChange={handleChange}
              onSelectChange={handleSelectChange}
              render={(item) => item.name}
            />
          </Form>
        </ProCard>
        <ProCard colSpan="50%">
          <Form form={form} initialValues={props.values}>
            <Transfer
              listStyle={{
                width: 500,
                height: 600,
              }}
              dataSource={transformedData}
              titles={['未得到按钮', '已拥有按钮']}
              targetKeys={targetKeys}
              selectedKeys={selectedKeys}
              onChange={handleChange}
              onSelectChange={handleSelectChange}
              render={(item) => item.name}
            />
          </Form>
        </ProCard>
      </ProCard>
    </Modal>
  );
};

export default AddMenuModal;
